<template>
    <n-drawer :show="active" :width="width" :mask-closable="false" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="编辑" closable>
            <n-form :model="model" :rules="rules" ref="formRef">
                <n-grid :cols="24" :x-gap="24">
                    <n-form-item-gi :span="24" label="标题" path="title">
                        <n-input placeholder="请填写广告标题" v-model:value="model.title" maxlength="64" show-count />
                    </n-form-item-gi>
                    <n-form-item-gi :span="24" label="跳转地址" path="act">
                        <n-input placeholder="请填写跳转地址，https://....地址全部路径" v-model:value="model.act" clearable />
                    </n-form-item-gi>
                    <n-form-item-gi :span="8" label="显示位置" path="advp">
                        <n-select v-model:value="model.advp" :options="opts" />
                    </n-form-item-gi>
                    <n-form-item-gi :span="8" label="是否显示" path="show">
                        <n-radio-group v-model:value="model.show" name="radiogroup">
                            <n-space>
                                <n-radio value="show">显示</n-radio>
                                <n-radio value="hide">隐藏</n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item-gi>
                    <n-form-item-gi :span="8" label="排序值，从小到大排序" path="sort">
                        <n-input-number v-model:value="model.sort" />
                    </n-form-item-gi>
                    <n-form-item-gi :span="24" label="图片" path="img">
                        <n-space vertical justify="center" :style="{ textAlign: 'center', width: '100%' }">
                            <n-card>
                                <n-image :width="width - 128" :height="((width - 128) / 5) * 3" object-fit="cover" :src="model.img" v-if="model.img" />
                                <n-icon v-else size="128">
                                    <CloudUploadRound />
                                </n-icon>
                            </n-card>
                            <ButtonUpload v-model:value="model.img" type="Image" accept="image/png,image/jpeg,image/webp" title="上传图片" />
                        </n-space>
                    </n-form-item-gi>
                </n-grid>
            </n-form>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" :disabled="loading" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                    <n-button :disabled="loading" @click="execReset">
                        <template #icon>
                            <n-icon :component="RestoreRound" />
                        </template>
                        重置
                    </n-button>
                    <n-button type="primary" :loading="loading" @click="execSave">
                        <template #icon>
                            <n-icon :component="CheckRound" />
                        </template>
                        提交保存
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, ref, onBeforeMount } from 'vue'
import { CloseRound, CheckRound, RestoreRound, CloudUploadRound } from '@vicons/material'

import { Http } from '@/libs'
import { useStore } from '@/store'

import ButtonUpload from '@/comp/func/ButtonUpload.vue'

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 640))

const { $notification: notification } = window

const loading = ref(false)

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        default: {},
    },
    advp: {
        type: String,
        default: undefined,
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const opts = [
    {
        label: '首页顶部位置',
        value: 'IDX_BANNER',
    },
    {
        label: '首页预订车辆下方位置',
        value: 'IDX_CENTER',
    },
    {
        label: '首页底部位置',
        value: 'IDX_BOTTOM',
    },
    {
        label: '企业服务内位置',
        value: 'BSVC_INNER',
    },
    {
        label: '预订车辆界面位置',
        value: 'BOOK_INNER',
    },
]

const formRef = ref<any>(null)

const model = ref<any>({})

const rules = {
    title: {
        required: true,
        trigger: ['blur', 'input'],
        message: '请填写广告标题',
    },
    advp: {
        required: true,
        trigger: ['blur', 'change'],
        message: '请选择广告位置',
    },
    img: {
        required: true,
        trigger: ['blur', 'change'],
        message: '请选择广告图片',
    },
    sort: {
        type: 'number',
        required: true,
        trigger: ['blur', 'change'],
        message: '请填写排序值',
    },
}

const execReset = () => {
    if (!prop.item.id) {
        model.value = {
            id: '',
            title: '',
            advp: prop.advp || opts[0].value,
            img: '',
            act: '',
            show: 'show',
            sort: 1,
        }
        return
    }
    model.value = {
        id: prop.item.id,
        title: prop.item.title,
        advp: prop.item.advp,
        img: prop.item.img,
        act: prop.item.act,
        show: prop.item.show ? 'show' : 'hide',
        sort: prop.item.sort,
    }
}

const execSave = (e: Event) => {
    e.preventDefault()
    formRef.value.validate((errors: any[]) => {
        if (!errors) {
            loading.value = true
            model.value.show = model.value.show === 'show'
            Http.post('/ops/opx/adv/save', model.value).then(resp => {
                if (resp.stat.err > 0) {
                    loading.value = false
                    return
                }
                emit('refresh', {})
                notification.success({
                    duration: 1500,
                    title: '操作成功',
                    content: '您已成功保存广告信息',
                })
                setTimeout(() => {
                    loading.value = false
                    emit('update:show', false)
                }, 200)
            })
        } else {
            let msgs = errors.map(err => err[0].message)
            notification.error({
                duration: 1500,
                title: '请填写完整内容',
                description: '当前表单存在以下问题，请处理后提交',
                content: msgs.join('\n'),
            })
        }
    })
}

onBeforeMount(() => {
    execReset()
})
</script>
